// components/scoreRateComparison/scoreRateComparison.js
import * as echarts from '../../ec-canvas/echarts';
let chart = null;
function setTrendOption(chart, xAxis, series) {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true
    },
    toolbox: {
      show: false
    },
    xAxis: {
      type: 'category',
      data: xAxis,
      axisLabel: {//坐标轴刻度标签
				show: true,
                rotate: 45 
			},
    },
    yAxis: {
      type: 'value',
    },
    legend: {show: true},
    series: series
  };
  chart.setOption(option);
}
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        xData: {
          type: Array,
          value: []
        },
        yData: {
          type: Array,
          value: []
        },
        list: {
            type: Array
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true
        },
        xdata: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
        ydata: [120, 200, 150, 80, 70, 110, 130]
    },
    lifetimes: {
        attached() {
          this.ecDataTrendComponent = this.selectComponent('#mychart-dom-line');
          this.getTrend()
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        getTrend() {
            setTimeout(() => {
              // 初始化完成之后，直接获取后台数据进行绘制canvas
              this.ecDataTrendComponent.init((canvas, width, height, dpr) => {
                // 获取组件的 canvas、width、height 后的回调函数
                // 在这里初始化图表
                const chart = echarts.init(canvas, null, {
                  width: width,
                  height: height,
                  devicePixelRatio: dpr // new
                });
                // let xAxis = {
                //   type: 'category',
                //   data: this.data.xdata
                // }
                let xAxis = this.data.xdata
                let arr = []
                this.data.ydata.map(res => {
                    arr.push({
                        name: res.name,
                        type: 'bar',
                        data: res.data
                    })
                })
                let series = arr
                // 将后台的值传递给 setTrendOption 方法
                setTrendOption(chart, xAxis, series);
                // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
                this.ecDataTrendChart = chart;
                // 注意这里一定要返回 chart 实例，否则会影响事件处理等
                return chart;
              });
            }, 0)
        },
    },
    observers: {
        xData(n,o) {
          console.log(n, 'ffffffffffffffffffffff');
          this.setData({
            xdata: n
          })
          this.getTrend()
        },
        yData(n,o) {
            console.log(n, 'aaaaaaaaaaaaaaaaaaaaaaa');
          this.setData({
            ydata: n
          })
          this.getTrend()
        }
    }
})